@extends('admin.pub.pub')
@section('title','Banner列表')
@section('bread1','Banner管理')
@section('bread2','Banner列表')
@section('css')
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap-theme.min.css" rel="stylesheet">
    <style>
        .banner{
            width: 100px;
        }
    </style>
@endsection
@section('content')
    <div class="container">
        <div class="cl pd-5 bg-1 bk-gray mt-20">
			<span class="l">
				<a class="btn btn-primary radius" data-title="添加banner" data-href="{{ route('admin.banner.create') }}"
                   onclick="Hui_admin_tab(this)" href="javascript:;">
					<i class="Hui-iconfont">&#xe600;</i> 添加banner
				</a>
			</span>
        </div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>banner名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            @forelse($banner as $item)
                <tr>
                    <td>{{ $item->id }}</td>
                    <td><img src="{{ $item->url }}" class="banner"></td>
                    <td>
                        <a href="javascript:;"
                           onclick="role_edit('[{{ $item->id }}] - 修改','{{ route('admin.banner.edit',['banner'=>$item->id]) }}')"
                           class="btn btn-success-outline">修改</a>
                        <a href="javascript:;"
                           onclick="role_del('{{ route('admin.banner.destroy',['banner'=>$item->id]) }}')"
                           class="btn btn-danger-outline">删除</a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7">暂无数据</td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>
@endsection
@section('js')
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script>
        // 编辑
        function role_edit(title, url) {
            layer.open({
                type: 2,
                title: title,
                content: url,
                area: ['500px', '450px']
            });
        }

        // 删除
        function role_del(url) {
            var _token = '{{ csrf_token() }}';
            layer.confirm('确认要删除吗？', function (index) {
                $.ajax({
                    url,
                    type: 'DELETE',
                    data: {_token},
                    dataType: 'json',
                    success(res) {
                        if (res.status == 0) {
                            layer.msg('删除成功', {time: 1000}, function () {
                                location.replace(location.href);
                            });
                        } else {
                            layer.alert('删除失败')
                        }
                    }
                })
            });
        }

        $('#category_id').change(function () {
            var cate_id = $(this).val();
            // 清空banner下拉菜单
            $('#course_id').html('<option value="">全部课程</option>');
            if (cate_id > 0) {
                //ajax请求获取banner
                $.ajax({
                    url: '/admin/courses/' + cate_id,
                    type: 'get',
                    dataType: 'json',
                    success(res) {
                        if (res.length > 0) {
                            // 追加到banner下拉菜单中
                            $.each(res, function (i, obj) {
                                $('#course_id').append(`<option value="${obj.id}">${obj.name}</option>`)
                            });
                        }
                    }
                })
            }
        });
    </script>
@endsection